<template>
  <div
    class="data-details-oprate"
    :class="{ showPadding: !isShowFold }"
  >
    <el-row class="data-details-oprate-row">
      <el-col :span="20">
        <el-row>
          <el-col :span="6">
            <span class="oprate-tit">执行进度:</span>
            <span class="oprate-con">{{ getFormat(data) }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">执行率:</span>
            <span class="oprate-con">{{ getProcess(data) + '%' }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">接通数:</span>
            <span class="oprate-con">{{ data.dealing }}</span>
          </el-col>
          <el-col :span="6">
            <span class="oprate-tit">接通率:</span>
            <span class="oprate-con">{{ getConnectionRate(data) + '%' }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" class="oprate-btn">
        <el-button v-show="isShowFold" round @click="showDetail">{{
          isShowDetails ? '收起' : '展开'
        }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator'
import taskMixin from './task-mixin'
@Component({
  name: 'outbound-oprate',
  components: {}
})
export default class OutboundOprate extends Mixins(taskMixin) {
  private isShowDetails = false
  @Prop({
    default: () => {
      return {}
    }
  }) private data: any

  @Prop({ default: true }) private isShowFold: boolean | undefined

  private showDetail () {
    this.isShowDetails = !this.isShowDetails
    this.$emit('showDetail', this.isShowDetails)
  }
}
</script>

<style lang="stylus" scoped>
.showPadding
  padding-left 24px
  padding-right 24px
.data-details-oprate
  // display flex
  justify-content space-between
  align-items center
  padding-top 16px
  padding-bottom 16px
  box-sizing border-box
  width 100%
  background #f4f9fd
  .data-details-oprate-row
    display flex
    align-items center
    .oprate-tit
      color #767E91
      margin-right 8px
    .oprate-con
      color #008BEE
      font-size 16px
      font-weight 600
    .oprate-btn
      width 20%
      display flex
      justify-content flex-end
      .V7_iconfont
        font-size 12px
</style>
